import React, {
  Component,
  PropTypes,
} from 'react';
import {
  View,
  StyleSheet,
} from 'react-native';
import ChartView from 'react-native-highcharts';
import PxToDp from '../../utils/PxToDp';

const style = StyleSheet.create({
  carBody: {
    height: PxToDp(52),
    width: PxToDp(52),
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
  },
  chartbox: {
    height: 52,
    width: 52,
  },
});

class SourceHighchart extends Component {
  static propTypes = {
    value: PropTypes.number,
  }

  render() {
    const Highcharts = 'Highcharts';
    const conf = {
      colors: ['#3d8df7', '#e7eeea'],
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        spacing: [0, 0, 0, 0],
      },
      title: {
        text: null,
      },
      tooltip: {
        enabled: false,
      },
      credits: {
        enabled: false,
      },
      exporting: {
        enabled: false,
      },
      labels: {
        items: [{
          html: this.props.value,
          style: {
            left: '50%',
            top: '40%',
            fontSize: '20px',
            fontFamily: '微软雅黑',
          },
        }],
      },
      subtitle: {
        floating: true,
        text: "<Image src=require('../../img/home/cule-list-wamen.png') />",
        y: 100,
      },
      plotOptions: {
        pie: {
          allowPointSelect: false,
          animation: false,
          cursor: 'pointer',
          dataLabels: {
            enabled: false,
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            },
          },
        },
      },
      series: [{
        type: 'pie',
        innerSize: '75%',
        data: [
          [this.props.intent90],
         [100 - this.props.intent90],
        ],
      }],
    };
    return (
      <View style={style.carBody}>
        <ChartView style={style.chartbox} config={conf} />
      </View>
    );
  }
}

export default SourceHighchart;
